import { Component, ElementRef, OnInit, Output, Input, ViewChild, AfterViewInit, EventEmitter } from '@angular/core';
import { HttpModule } from '@angular/http';
import { HttpClientModule, HttpClient, HttpErrorResponse } from '@angular/common/http';

import { RouterModule, Router, ActivatedRoute } from '@angular/router';
import { RemoveTableService } from '../../../public/serve/remove-table/remove-table.service';
import { CudTableService } from '../../../public/serve/cud-table/cud-table.service';
import { Pagination } from '../../../public/serve/pcrudInfo';
import { Service } from '../../../server/server';
import { addDatatype } from '../effect-add/effect-add.component';
import { paginationData } from '../effect-data';
declare var $: any;

@Component({
  selector: 'app-effect-table',
  templateUrl: './effect-table.component.html',
})
export class EffectTableComponent implements OnInit {

  @Input() tableNumber: number;
  @Input() getAllPermission: Array<any>;

  @Output() tabeListOutput = new EventEmitter<string>();
  @Output() isSelectFromTable = new EventEmitter<boolean>();
  @Output() detailsOutput = new EventEmitter<object>();

  tabVal: addDatatype;
  tabValed: Array<any>;

  isSelectAll: boolean = false;
  isChose: boolean = false;
  isSelect: boolean = true;
  isDisable: any;              // 按钮（启用/禁用）   

  right: any = { "user": {}, "effect": {} };
  constructor(private http: HttpClient, private server: Service, private router: Router, private tableListService: CudTableService, private removeTableService: RemoveTableService) {
    this.right = $.extend(this.right, server.getRight());
  }

  ngOnInit() {
    this.getTabList(paginationData);
    //接受查询结果
    this.effectsearcheventEmit = this.server.effectsearcheventEmit.subscribe((value: any) => {
      this.tabVal = value;
    });
  }

  //取消订阅
  public effectsearcheventEmit: any;
  ngOnDestroy() {
    if (this.effectsearcheventEmit) {
      this.effectsearcheventEmit.unsubscribe();
    }
  }

  // 表格
  getTabList(info) {

    let url = this.server.baseUrl+'user/functions/getSublevelInfo';

    this.tableListService
      .postRequest(url, info)
      .then((data: any) => {
        if (data.result_code == '0000') {
          this.tabVal = data.result;
          this.tabeListOutput.emit(data.length);
        }
      })
      .catch((err: any) => {
        console.error('请检查您的网络！');
      });
  }

  // 详情（弹窗），用于展示默认数据
  detailsPopup(tabval) {
    this.outputTabVal(tabval);
    $("#details").modal("show");
  }

  // 修改（弹窗），用于展示默认数据
  editPopup(tabval) {
    this.outputTabVal(tabval);
    $("#updates").modal("show");
  }

  // 选中传Id
  permissionPopup(tabval) {
    this.server.effectIdeventEmit.emit(tabval);
    $("#permission").modal("show");
  }

  // 每一行的表格信息
  outputTabVal(tabval) {
    this.detailsOutput.emit(tabval);
  }

  /**
   * 全选
   * @param bool 
   * @param tabVal 
   */
  selectAll(bool, tabVal) {
    this.isSelectAll = this.isChose = this.removeTableService.removeAll(bool, tabVal, 'functionId');
    this.isSelect = !this.isSelectAll;
    this.isSelectFromTable.emit(this.isSelect);
  }

  /**
   * 单选（多选）
   * @param bool 
   * @param functionId 
   * @param length 
   */
  chose(bool, functionId, length) {
    this.isDisable = this.removeTableService.removeChose(bool, functionId, length);
    this.isSelectAll = this.isDisable.bool;
    this.isDisable.len ? this.isSelect = false : this.isSelect = true;
    this.isSelectFromTable.emit(this.isSelect);
  }

  /**
   * 没有数据时取消勾选全选按钮
   */
  cancelSelectAll() {
    this.isSelectAll = false;
    this.isChose = false;
  }

}
